window.onload = () => {

    // 获取接口
    const url = 'http://47.113.197.172:80/slideShow';
    // 获取轮播图
    var slide = document.querySelector('.slide');
    var arrLength = 0;
    // axios请求获取数据
    axios(url, {
        // 请求方法
        method: 'get',
        // 请求时的头信息
        Headers: {
            'Content-Type': 'application/json'
        },
    })
        .then(function (Response) {
            // 调用获取数据函数
            addMes(Response);
        })
        .catch(err => {
            console.log(err);
        })

    // 将获取到的数据添加至页面
    function addMes(Response) {
        // 获取数据的长度
        arrLength = Response.data.data.length;

        // 首先创建和数据一样多个li，并添加到ul中
        // arrLength -= 2;
        for (i = 0; i < arrLength; i++) {
            var li = document.createElement('li');
            slide.appendChild(li);
        }

        // 再获取全部的li
        var lis = slide.children;

        // 分别给每一个li添加内容（标题、简介、背景图）
        for (i = 0; i < lis.length; i++) {
            // 获取标题并设置类名
            var title = document.createElement('div');
            lis[i].appendChild(title);
            title.innerHTML = Response.data.data[i].title;
            title.className = "title";

            // 获取简介并设置类名
            var brief = document.createElement('div');
            lis[i].appendChild(brief);
            brief.innerHTML = Response.data.data[i].brief;
            brief.className = "brief";

            // 获取简介并设置类名
            var bg = document.createElement('img');
            lis[i].appendChild(bg);
            bg.src = Response.data.data[i].pcLargeImage;
            bg.className = "bg";

            // console.log(Response.data.data[i]);
        }

        // 给1第一个li类名，改变样式
        lis[0].className = 'bigger';

        // 复制前三个li节点，放在列表最后，用于返回轮播图最前面
        for (var i = 0; i < 3; i++) {
            slide.appendChild(lis[i].cloneNode(true));
        }

    }

    // 轮播图模块
    // 运动函数：执行对象，终点，回调函数
    function animation(obj, target, callback) {
        // 清除之前的定时器
        clearInterval(obj.timer);
        obj.timer = setInterval(function () {
            // 设置步长
            var step = (target - obj.offsetLeft) / 10;
            // 判断移动方向
            step = step > 0 ? Math.ceil(step) : Math.floor(step);
            if (obj.offsetLeft == target) {
                // 清除定时器，停止动画
                clearInterval(obj.timer);
                // 回调函数
                callback && callback();
            }
            obj.style.left = obj.offsetLeft + step + 'px';
        }, 15);
    }



    var timer = null;
    var num = 0;
    // 获取左右按钮
    var rightBtn = document.querySelector('.rightBtn');
    var leftBtn = document.querySelector('.leftBtn');
    // 判断移动距离和左右按钮
    function slideMove() {
        // 用于计算点击的次数，往左-1，往右+1
        num = 0;
        // 判断是否是最后一次点击
        var flag = 0;
        // 记录移动之后的位置和移动之前的位置
        var nowPosition = 0;
        var formerPosition = 0;
        // 用于记录最后一组剩下的个数
        var leave = 0;

        // 节流阀开关
        var on = function () {
            start = 1;
        }
        on();
        if (start === 1) {
            rightBtn.addEventListener('click', () => {
                // 关闭节流阀
                start = 0;
                leftBtn.style.display = 'block';
                // 清除定时器
                clearInterval(timer);
                // 最后一组剩下的个数
                leave = (arrLength - 3) - num * 6;
                // 移动最后一组之后，下一次点击
                if (flag === 1) {
                    leftBtn.style.display = 'none';
                    // 移动到复制的li
                    animation(slide, nowPosition - 1080);
                    // 同时在移动结束后马上返回最前面
                    setTimeout(function () {
                        slide.style.left = 60 + 'px';
                    }, 770);
                    flag = 0;
                    num = 0;
                    // 全部执行完之后再开启节流阀
                    on();
                }
                // 如果剩下的不够一组，根据剩下的个数移动不同的距离
                else if (parseInt(leave / 6) === 0 && flag === 0) {
                    formerPosition = -1080 * num + 60;
                    if (leave === 1 || leave === 2) {
                        nowPosition = formerPosition - 360;
                        animation(slide, nowPosition, on);
                    }
                    else if (leave === 3 || leave === 4) {
                        nowPosition = formerPosition - 720;
                        animation(slide, nowPosition, on);
                    }
                    else {
                        nowPosition = formerPosition - 1080;
                        animation(slide, nowPosition, on);
                    }
                    flag = 1;
                    num++;
                }
                // 如果不是最后一组，则每次点击都移动固定距离
                else {
                    num++;
                    animation(slide, -1080 * num + 60, on);
                };
                timer = setInterval(function () {
                    rightBtn.click();
                }, 3000);



            })

            // 上一张的点击事件
            leftBtn.addEventListener('click', () => {
                start = 0;
                flag = 0;
                // 清除定时器
                clearInterval(timer);
                // 如果是最后一组，则往回移动剩下个数所对应的距离
                if (flag === 1) {
                    animation(slide, formerPosition, on);
                    num--;
                }
                // 如果不是最后一组，则每次点击都移动固定距离
                if (flag === 0) {
                    num--;
                    animation(slide, -1080 * num + 60, on);
                };
                console.log(num);
                // 判断如果已经是第一张了，隐藏按钮
                if (num === 0) {
                    leftBtn.style.display = 'none';
                }
                timer = setInterval(function () {
                    rightBtn.click();
                }, 3000);
            })
        }
        // 开启定时器自动轮播
        timer = setInterval(function () {
            rightBtn.click();
        }, 3000);

        // 鼠标经过轮播图停止，移开继续
        for (i = 0; i < slide.children.length; i++) {
            slide.children[i].addEventListener('mouseenter', () => {
                clearInterval(timer);
            })
            slide.children[i].addEventListener('mouseleave', () => {
                timer = setInterval(function () {
                    rightBtn.click();
                }, 3000);
            })
        }

    }
    slideMove();

    // 轮播图模块的响应式布局
    // window.addEventListener('resize', function(){});
    // 作用是调整窗口大小，只要窗口大小发生变化，就会触发。
    // 可以用于响应式布局。window.innerWidth 是当前屏幕的宽度


    // 设置一个值用来保存之前的屏幕宽度


    // 当窗口大小小于960px时改变布局
    var newTimer = null;
    var resizeTimer = null;
    window.addEventListener('resize', function () {
        clearTimeout(resizeTimer);
        resizeTimer = setTimeout(function () {
            if (window.innerWidth < 960) {
                for (i = 1; i < arrLength + 3; i++) {
                    slide.children[i].className = 'bigger';
                }
                // 停止大窗口下轮播图的定时器
                clearInterval(timer);
                // 停止上一次改动时小窗口的定时器
                clearInterval(newTimer);
                // 移动到第一张
                slide.style.left = 0;
                var newNum = 0;
                // 取消左右按钮功能
                leftBtn.style.display = 'none';
                rightBtn.onclick = null;
                // 开启小窗口下轮播图的定时器
                newTimer = setInterval(function () {
                    newNum++;
                    animation(slide, newNum * -726);
                    if (newNum == arrLength) {
                        setTimeout(function () {
                            slide.style.left = 0;
                        }, 800);
                        newNum = 0;
                    }
                }, 3000);


            }
            else {
                for (i = 1; i < arrLength + 3; i++) {
                    slide.children[i].className = '';
                }
                slide.children[arrLength].className = 'bigger';
                clearInterval(timer);
                clearInterval(newTimer);
                timer = setInterval(function () {
                    rightBtn.click();
                }, 3000);
            }
        }, 600)

    });







}